<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="150px" label-position="top" style="padding: 0 30px">
    <p class="title">基础设置</p>
    <el-row>
      <el-col :span="12">
        <!-- 计划审核 -->
        <el-form-item label="计划审核" prop="planApproval">
          <el-switch v-model="form.planApproval" />
          <span style="margin-left: 10px; color: #a7a7a7">关闭后，创建计划后则跳过审核环节</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 分配节点 -->
        <el-form-item label="分配节点" prop="distributionNode">
          <el-radio-group v-model="form.distributionNode">
            <el-radio :label="1">审核通过后自动分配</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <!-- 分配方式 -->
        <el-form-item label="分配方式" prop="distributionMethod">
          <el-checkbox-group v-model="form.distributionMethod">
            <el-checkbox :label="1">平均分配</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 单车趟次 -->
        <el-form-item label="单车趟次" prop="carTrips">
          <el-input v-model="form.carTrips" size="small" placeholder="输入单车趟次" @input="validateCarTrips" />
          <el-alert v-if="carTripsError" type="error" title="不能为0" show-icon />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <!-- 计划量上浮比例 -->
        <el-form-item label="计划量上浮比例" prop="planFloatRate">
          <div class="input-wrapper">
            <span class="text">派车和开卡最多可超过计划量的</span>
            <el-input
              v-model="form.planFloatRate"
              size="small"
              class="input"
              placeholder="%"
              maxlength="6"
              @input="validatePlanFloatRate"
            />
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 派车开卡方式 -->
        <el-form-item label="派车开卡方式" prop="dispatchMethod">
          <el-radio-group v-model="form.dispatchMethod">
            <el-radio :label="1">按趟次</el-radio>
            <el-radio :label="2">按计划量</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <!-- 物流单即将超时时限 -->
        <el-form-item label="物流单即将超时时限" prop="logisticsTimeout">
          <span class="text">要求完成截止时间的前</span>
          <el-input v-model="form.logisticsTimeout" size="small" class="input" placeholder="分钟" maxlength="6" />
          <span class="text">为即将超时</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <p class="title">完成设置</p>
      <el-col :span="12">
        <!-- 计划完成条件 -->
        <el-form-item label="计划完成条件（过二次磅后统计）" prop="completionConditions">
          <el-checkbox-group v-model="form.completionConditions">
            <el-checkbox :label="1">实际完成量≥计划量</el-checkbox>
            <el-checkbox :label="2">剩余计划量≤计划量 </el-checkbox>
            <el-input
              v-model="form.logisticsTimeout"
              size="small"
              class="input"
              placeholder="%"
              maxlength="6"
              @input="validatePlanFloatRate"
            />
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <!-- 计划完成方式 -->
        <el-form-item label="计划完成方式" prop="completionMethod">
          <el-checkbox-group v-model="form.completionMethod">
            <el-checkbox :label="1">自动完成</el-checkbox>
            <el-checkbox :label="2">手动完成</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <el-form-item>
      <div class="btn">
        <el-button class="button" @click="dialogVisible = false">取消</el-button>
        <el-button class="button" type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      carTripsError: false, // 错误提示标志
      form: {
        planApproval: true,
        distributionNode: 1,
        distributionMethod: [1],
        carTrips: 1,
        planFloatRate: '0',
        dispatchMethod: 1,
        logisticsTimeout: '',
        completionConditions: [1],
        completionMethod: []
      },
      rules: {
        distributionNode: [{ required: true, message: '请选择分配节点', trigger: 'change' }],
        distributionMethod: [{ required: true, message: '请选择分配方式', trigger: 'change' }],
        carTrips: [
          { required: true, message: '请输入单车趟次', trigger: 'blur' },
          { validator: this.checkCarTrips, trigger: 'blur' }
        ],
        planFloatRate: [{ required: true, message: '请输入计划量上浮比例', trigger: 'blur' }],
        logisticsTimeout: [{ required: true, message: '请输入超时时限', trigger: 'blur' }],
        dispatchMethod: [{ required: true, message: '请选择派车开卡方式', trigger: 'change' }],
        completionConditions: [{ required: true, message: '请选择计划完成条件', trigger: 'change' }],
        completionMethod: [{ required: true, message: '请选择计划完成方式', trigger: 'change' }]
      }
    }
  },
  methods: {
    validatePlanFloatRate() {
      const value = this.form.planFloatRate
      const regex = /^\d{0,3}(\.\d{0,2})?$/ // 正则匹配：最多3位整数和2位小数
      if (!regex.test(value)) {
        this.form.planFloatRate = value.slice(0, -1) // 通过截取字符串来限制不合法输入
      }
    },

    checkPlanFloatRate(rule, value, callback) {
      const regex = /^\d{1,3}(\.\d{1,2})?$/ // 匹配1~3位整数和最多2位小数
      if (value === '' || value === null) {
        callback(new Error('请输入计划量上浮比例'))
      } else if (!regex.test(value)) {
        callback(new Error('请输入合法的数值，最多3位整数和2位小数'))
      } else {
        callback()
      }
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('操作成功')
          this.dialogVisible = false
        } else {
          this.$message.error('填写错误，请修改后再提交')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input {
  width: 50%;
}
::v-deep .el-input-group__append {
  background-color: #fff;
}
::v-deep .el-form-item__content {
  line-height: 0;
}
.title {
  font-size: 16px;
  font-weight: 700;
}
.input {
  margin: 0 8px;
  width: 15%;
}
.text {
  line-height: 32px;
}
.btn {
  position: fixed;
  bottom: 20px;
  right: 40px;
  display: flex;
  justify-content: flex-end;

  .button {
    margin-left: 10px;
    width: 80px;
  }
}
// .btn {
//   display: flex;
//   justify-content: flex-end;
//   .button {
//     margin-top: 30px;
//     width: 80px;
//   }
// }
</style>
